<template>
  <div id="villageDetail">
    <div class="listbox">
      <div class="villagelist">
        <div v-for="(item,i) in villagelist" :key="i"
          :class="{'chk':(formId&&item.id==formId)||villageIndex==i,'type1':item.htType==1,'type2':item.htType==2}"
          @click="villageTab(i)">{{item.villageName}}</div>
      </div>
    </div>
    <div class="infobox">
      <el-tabs v-model="activeName">
        <el-tab-pane :label="(villageIndex||villageIndex==0)?form.village.villageName:'村庄简介'" name="first">
          <div class="ms">
            <el-form ref="villageForm" :model="form.village" :rules="rules">
              <div class="detail-title">基础信息</div>
              <div class="table">
                <div class="table-at">
                  <div v-if="!villageIndex&&villageIndex!=0">村庄名称</div>
                  <div>级别</div>
                  <div>联系人</div>
                  <div>联系电话</div>
                  <div>数据年份</div>
                  <div>部门</div>
                  <div>上传人</div>
                </div>
                <div class="table-no">
                  <div v-if="!villageIndex&&villageIndex!=0">
                    <el-form-item label="" prop="address">
                      <el-input v-model="form.village.villageName" placeholder="请输入村庄名称"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="villageGrade">
                      <!-- <el-input v-model="form.village.villageGrade" placeholder="请输入级别"></el-input> -->
                      <el-select v-model="form.village.villageGrade" placeholder="请选择级别" style="width: 100%;">
                        <el-option v-for="item in villageGradeOptions" :key="item.labelValue" :label="item.dictLabel"
                          :value="item.dictValue" />
                      </el-select>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="contactPerson">
                      <el-input v-model="form.village.contactPerson" placeholder="请输入联系人"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="contactNumber">
                      <el-input v-model="form.village.contactNumber" placeholder="请输入联系电话"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="address">
                      <el-date-picker v-model="form.village.year" type="year" placeholder="请选择数据年份"
                        style="width: 100%;">
                      </el-date-picker>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="address">
                      <el-input v-model="form.village.deptName" placeholder="请输入部门"></el-input>
                    </el-form-item>
                  </div>
                  <div>
                    <el-form-item label="" prop="address">
                      <el-input v-model="form.village.userName" placeholder="请输入上传人"></el-input>
                    </el-form-item>
                  </div>
                </div>
                <div class="table-at">
                  <div style="flex: 1;text-align: center;">地址</div>
                </div>
                <div class="table-no">
                  <div style="flex: 1;text-align: center;">
                    <el-form-item label="" prop="address">
                      <el-cascader ref="villageCascader" v-if="cascaderShow" :placeholder="cascaderPlaceholder"
                        v-model="form.village.mgyAreaCodeId" :props="villageProp" style="width: 100%;" />
                    </el-form-item>
                  </div>
                </div>
              </div>
              <div class="detail-title">乡村简介(如有活动添加导简介内)</div>
              <el-form-item label="" prop="address">
                <!-- <el-input type="textarea" v-model="form.village.villageIntroduce" placeholder="请输入乡村简介"
                  :rows="5"></el-input> -->
                <Editor v-model="form.village.villageIntroduce" :height="300" />
              </el-form-item>
              <div class="detail-title">注意事项</div>
              <el-form-item label="" prop="address">
                <el-input type="textarea" v-model="form.village.attentionMsg" placeholder="请输入注意事项"
                  :rows="5"></el-input>
                <!-- <Editor v-model="form.village.attentionMsg" :height="300" /> -->
              </el-form-item>
              <div class="detail-title">上传图片</div>
              <el-form-item label="" prop="address">
                <imageUpload :value="form.village.villageImage" @uploadImage="villageUploadImg"
                  @remove="villageUploadImg" :limit="9" />
              </el-form-item>
            </el-form>
          </div>

        </el-tab-pane>
        <el-tab-pane label="特色美食" name="second">
          <div v-for="(item, index) in form.hotelList" :key="index">
            <div class="ms">
              <el-form ref="hotelListForm" :model="item" :rules="rules">
                <div class="detail-title">
                  <span>基础信息</span>
                  <i class="el-icon-delete" @click="partChg('hotelList','del',index)"></i>
                </div>
                <div class="table">
                  <div class="table-at">
                    <div>场所名称</div>
                    <div>营业时间</div>
                    <div>人均消费</div>
                    <div>联系人</div>
                    <div>联系电话</div>
                    <div>地址</div>
                  </div>
                  <div class="table-no">
                    <div>
                      <el-form-item label="" prop="name">
                        <el-input v-model="item.name" placeholder="请输入场所名称"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="businessHours">
                        <el-input v-model="item.businessHours" placeholder="请输入营业时间"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="avgCost">
                        <el-input v-model="item.avgCost" placeholder="请输入人均消费"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="contactPerson">
                        <el-input v-model="item.contactPerson" placeholder="请输入联系人"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="contactNumber">
                        <el-input v-model="item.contactNumber" placeholder="请输入联系电话"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="address">
                        <el-input v-model="item.address" placeholder="请输入详细地址">
                          <el-button slot="append" icon="el-icon-location"
                            @click="openLocal('hotelList',index)"></el-button>
                        </el-input>
                      </el-form-item>
                    </div>
                  </div>
                </div>
                <div class="detail-title">场所简介</div>
                <el-form-item label="" prop="intro">
                  <!-- <el-input type="textarea" v-model="item.intro" placeholder="请输入场所简介" :rows="5"></el-input> -->
                  <Editor v-model="item.intro" :height="300" />
                </el-form-item>
                <div class="detail-title">注意事项</div>
                <el-form-item label="" prop="attentionMsg">
                  <el-input type="textarea" v-model="item.attentionMsg" placeholder="请输入注意事项" :rows="5"></el-input>
                  <!-- <Editor v-model="item.attentionMsg" :height="300" /> -->
                </el-form-item>
                <div class="detail-title">美食推荐</div>
                <el-form-item label="" prop="dishes">
                  <el-table :data="item.dishes">
                    <el-table-column label="名称" align="center" prop="name" width="200">
                      <template slot-scope="scope">
                        <el-form-item label="" prop="name">
                          <el-input type="text" v-model="scope.row.name" placeholder="请输入美食名称"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="简介" align="center" prop="intro">
                      <template slot-scope="scope">
                        <el-form-item label="" prop="intro">
                          <el-input type="text" v-model="scope.row.intro" placeholder="请输入美食简介"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="图片" align="center" prop="img">
                      <template slot-scope="scope">
                        <el-form-item label="" prop="img">
                          <imageUploadMin :value="scope.row.img" :index="scope.$index" :fatherIndex="index"
                            @uploadImage="msDelicacyUploadImg" :limit="5" />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" prop="img" width="80">
                      <template slot-scope="scope">
                        <el-button icon="el-icon-delete" @click="foodDeleteClick(scope, index)"
                          :disabled="item.dishes.length<=1"></el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="add-line" @click="foodClick(index)">+</div>
                </el-form-item>
                <el-form-item label="" prop="address">
                  <div class="detail-title">上传图片</div>
                  <imageUploadMax :value="item.img" :index="index" @uploadImage="delicacyUploadImg"
                    @remove="delicacyUploadImg" :limit="9" />
                </el-form-item>
              </el-form>
            </div>
            <div style="background:#FFFFFF;" class="add-line"
              @click="partChg('hotelList',form.hotelList.length === (index + 1) ? 'add' : 'del',index)">
              {{ form.hotelList.length === (index + 1) ? '+' : '-' }}
            </div>
          </div>
          <div class="addbtn" v-if="form.hotelList.length==0" @click="partChg('hotelList','add')"><i
              class="el-icon-plus"></i><span>新建表单</span></div>
        </el-tab-pane>
        <el-tab-pane label="景点信息" name="land">
          <div v-for="(item, index) in form.appLandscapesIntroductions" :key="index">
            <div class="ms">
              <el-form ref="form.appLandscapesIntroductions" :model="item" :rules="rules">
                <div class="detail-title">
                  <span>基础信息</span>
                  <i class="el-icon-delete" @click="partChg('appLandscapesIntroductions','del',index)"></i>
                </div>
                <div class="table">
                  <div class="table-at">
                    <div>景点类型</div>
                    <div>景点名称</div>
                    <div>景点别名</div>
                    <div>门票费用</div>
                    <div>浏览时间</div>
                    <div>景点规模</div>
                  </div>
                  <div class="table-no">
                    <div>
                      <el-form-item label="" prop="landscapeClassify">
                        <el-select v-model="item.landscapeClassify" placeholder="请选择景点类型" style="width: 100%;">
                          <el-option v-for="item in landscapeClassifyOptions" :key="item.dictValue"
                            :label="item.dictLabel" :value="item.dictValue" />
                        </el-select>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="landscapesName">
                        <el-input v-model="item.landscapesName" placeholder="请输入景点名称"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="title">
                        <el-input v-model="item.title" placeholder="请输入景点别名"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="ticketPrice">
                        <el-input v-model="item.ticketPrice" placeholder="请输入门票费用"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="visitTime">
                        <el-input v-model="item.visitTime" placeholder="请输入浏览时间"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="landscapeScale">
                        <el-select v-model="item.landscapeScale" placeholder="请选择景点规模" style="width: 100%;">
                          <el-option v-for="item in landscapeScaleOptions" :key="item.dictValue" :label="item.dictLabel"
                            :value="item.dictValue" />
                        </el-select>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="table-at">
                    <div>联系人</div>
                    <div>联系电话</div>
                    <div style="flex:1;text-align:center;">地址</div>
                  </div>
                  <div class="table-no">
                    <div>
                      <el-form-item label="" prop="contactPerson">
                        <el-input v-model="item.contactPerson" placeholder="请输入联系人"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="contactNumber">
                        <el-input v-model="item.contactNumber" placeholder="请输入联系电话"></el-input>
                      </el-form-item>
                    </div>
                    <div style="flex:1;text-align:center;">
                      <el-form-item label="" prop="address">
                        <el-input v-model="item.address" placeholder="请输入详细地址">
                          <el-button slot="append" icon="el-icon-location"
                            @click="openLocal('appLandscapesIntroductions',index)"></el-button>
                        </el-input>
                      </el-form-item>
                    </div>
                  </div>
                </div>
                <div class="detail-title">景点简介</div>
                <el-form-item label="" prop="landscapesIntroduction">
                  <!-- <el-input type="textarea" v-model="item.landscapesIntroduction" placeholder="请输入场所简介"
                    :rows="5"></el-input> -->
                  <Editor v-model="item.landscapesIntroduction" :height="300" />
                </el-form-item>
                <div class="detail-title">注意事项</div>
                <el-form-item label="" prop="attentionMsg">
                  <el-input type="textarea" v-model="item.attentionMsg" placeholder="请输入注意事项"
                    :rows="5"></el-input>
                  <!-- <Editor v-model="item.attentionMsg" :height="300" /> -->
                </el-form-item>
                <el-form-item label="" prop="image">
                  <div class="detail-title">上传图片</div>
                  <imageUploadMax :value="item.image" :index="index" @uploadImage="landsUploadImg" :limit="9" />
                </el-form-item>
              </el-form>
            </div>
            <div style="background:#FFFFFF;" class="add-line"
              @click="partChg('appLandscapesIntroductions',form.appLandscapesIntroductions.length === (index + 1) ? 'add' : 'del',index)">
              {{ form.appLandscapesIntroductions.length === (index + 1) ? '+' : '-' }}
            </div>
          </div>
          <div class="addbtn" v-if="form.appLandscapesIntroductions.length==0"
            @click="partChg('appLandscapesIntroductions','add')"><i class="el-icon-plus"></i><span>新建表单</span></div>
        </el-tab-pane>
        <el-tab-pane label="土特产" name="fourth">
          <div v-for="(item, index) in form.goods" :key="index">
            <div class="ms">
              <el-form ref="goodsForm" :model="item" :rules="rules">
                <div class="detail-title">
                  <span>基础信息</span>
                  <i class="el-icon-delete" @click="partChg('goods','del',index)"></i>
                </div>
                <div class="table">
                  <div class="table-at">
                    <div>特产类型</div>
                    <div>特产名称</div>
                    <div>生产厂家</div>
                    <div>原价</div>
                    <div>价格</div>
                    <div>联系人</div>
                    <div>联系电话</div>
                  </div>
                  <div class="table-no">
                    <div>
                      <el-form-item label="" prop="classifyName">
                        <el-select v-model="item.classifyId" placeholder="请选择特产类型" style="width: 100%;">
                          <el-option v-for="productsItem in productTypeList" :key="productsItem.classifyId" :label="productsItem.classifyName"
                            :value="productsItem.classifyId" />
                        </el-select>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="goodsName">
                        <el-input v-model="item.goodsName" placeholder="请输入特产名称"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="manufacturer">
                        <el-input v-model="item.manufacturer" placeholder="请输入生产厂家"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="originalPrice">
                        <el-input v-model="item.originalPrice" placeholder="请输入原价格"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="price">
                        <el-input v-model="item.price" placeholder="请输入价格"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="contactPerson">
                        <el-input v-model="item.contactPerson" placeholder="请输入联系人"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="contactNumber">
                        <el-input v-model="item.contactNumber" placeholder="请输入联系电话"></el-input>
                      </el-form-item>
                    </div>
                  </div>
                  <div class="table-at">
                    <div style="flex:1;text-align:center;">地址</div>
                  </div>
                  <div class="table-no">
                    <div style="flex:1;text-align:center;">
                      <el-form-item label="" prop="address">
                        <el-input v-model="item.address" placeholder="请输入地址">
                          <el-button slot="append" icon="el-icon-location"
                            @click="openLocal('goods',index)"></el-button>
                        </el-input>
                      </el-form-item>
                    </div>
                  </div>
                </div>
                <div class="detail-title">土特产简介</div>
                <el-form-item label="" prop="introduce">
                  <!-- <el-input type="textarea" v-model="item.introduce" placeholder="请输入场所简介" :rows="5"></el-input> -->
                  <Editor v-model="item.introduce" :height="300" />
                </el-form-item>
                <div class="detail-title">注意事项</div>
                <el-form-item label="" prop="attentionMsg">
                  <el-input type="textarea" v-model="item.attentionMsg" placeholder="请输注意事项" :rows="5"></el-input>
                  <!-- <Editor v-model="item.attentionMsg" :height="300" /> -->
                </el-form-item>
                <el-form-item label="" prop="goodsImage">
                  <div class="detail-title">上传图片</div>
                  <imageUploadMax :value="item.goodsImage" :index="index" @uploadImage="goodsUploadImg" :limit="9" />
                </el-form-item>
              </el-form>
            </div>
            <div style="background:#FFFFFF;" class="add-line"
              @click="partChg('goods',form.goods.length === (index + 1) ? 'add' : 'del',index)">
              {{ form.goods.length === (index + 1) ? '+' : '-' }}
            </div>
          </div>
          <div class="addbtn" v-if="form.goods.length==0" @click="partChg('goods','add')"><i
              class="el-icon-plus"></i><span>新建表单</span></div>
        </el-tab-pane>
        <el-tab-pane label="特色民宿" name="five">
          <div v-for="(item, index) in form.hostelList" :key="index">
            <div class="ms">
              <el-form ref="hostelListForm" :model="item" :rules="rules">
                <div class="detail-title">
                  <span>基础信息</span>
                  <i class="el-icon-delete" @click="partChg('hostelList','del',index)"></i>
                </div>
                <div class="table">
                  <div class="table-at">
                    <div>民宿名称</div>
                    <div>联系人</div>
                    <div>联系电话</div>
                    <div style="flex:1;text-align:center;">地址</div>
                  </div>
                  <div class="table-no">
                    <div>
                      <el-form-item label="" prop="name">
                        <el-input v-model="item.name" placeholder="请输入民宿名称"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="contactPerson">
                        <el-input v-model="item.contactPerson" placeholder="请输入联系人"></el-input>
                      </el-form-item>
                    </div>
                    <div>
                      <el-form-item label="" prop="contactNumber">
                        <el-input v-model="item.contactNumber" placeholder="请输入联系电话"></el-input>
                      </el-form-item>
                    </div>
                    <div style="flex:1;text-align:center;">
                      <el-form-item label="" prop="address">
                        <el-input v-model="item.address" placeholder="请输入地址">
                          <el-button slot="append" icon="el-icon-location"
                            @click="openLocal('hostelList',index)"></el-button>
                        </el-input>
                      </el-form-item>
                    </div>

                  </div>
                </div>
                <div class="detail-title">民宿简介</div>
                <el-form-item label="" prop="address">
                  <!-- <el-input type="textarea" v-model="item.intro" placeholder="请输入场所简介" :rows="5"></el-input> -->
                  <Editor v-model="item.intro" :height="300" />
                </el-form-item>
                <div class="detail-title">注意事项</div>
                <el-form-item label="" prop="address">
                  <el-input type="textarea" v-model="item.attentionMsg" placeholder="请输入注意事项" :rows="5"></el-input>
                  <!-- <Editor v-model="item.attentionMsg" :height="300" /> -->
                </el-form-item>
                <div class="detail-title">房间类型</div>
                <el-form-item label="" prop="hostelRooms">
                  <el-table :data="item.hostelRooms">
                    <el-table-column label="类型" align="center" prop="name" width="200">
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.roomType" placeholder="请选择类型" style="width: 100%;">
                          <el-option v-for="item in roomOptions" :key="item.dictValue" :label="item.dictLabel"
                            :value="item.dictValue" />
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="简介" align="center" prop="intro">
                      <template slot-scope="scope">
                        <el-form-item label="" prop="intro">
                          <el-input type="text" v-model="scope.row.intro" placeholder="请输入美食简介"></el-input>
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="图片" align="center" prop="imageUrl">
                      <template slot-scope="scope">
                        <el-form-item label="" prop="imageUrl">
                          <imageUploadMin :value="scope.row.imageUrl" :index="scope.$index" :fatherIndex="index"
                            @uploadImage="roomTypeUploadImg" :limit="5" />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" prop="img" width="80">
                      <template slot-scope="scope">
                        <el-button icon="el-icon-delete" @click="roomTypeDeleteClick(scope, index)"
                          :disabled="item.hostelRooms.length<=1"></el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <div class="add-line" @click="roomTypeClick(index)">+</div>
                </el-form-item>
                <el-form-item label="" prop="address">
                  <div class="detail-title">上传图片</div>
                  <imageUploadMax :value="item.imageUrl" :index="index" @uploadImage="roomUploadImg" :limit="9" />
                </el-form-item>
              </el-form>
            </div>
            <div style="background:#FFFFFF;" class="add-line"
              @click="partChg('hostelList',form.hostelList.length === (index + 1) ? 'add' : 'del',index)">
              {{ form.hostelList.length === (index + 1) ? '+' : '-' }}
            </div>
          </div>
          <div class="addbtn" v-if="form.hostelList.length==0" @click="partChg('hostelList','add')"><i
              class="el-icon-plus"></i><span>新建表单</span></div>
        </el-tab-pane>
      </el-tabs>
      <el-button class="wan" :loading="buttonState" @click="submit">{{ buttonState ? '正在注册中...' : '完成' }}</el-button>
    </div>

    <el-dialog title="地点定位" :visible.sync="localForm.open" width="1200px" append-to-body>
      <el-form ref="localForm" :model="localForm" label-width="0">
        <el-form-item label="">
          <MAP :value="localForm.toPosition" height="500px" :address="localForm.toAddress" @input="mapChg"></MAP>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitLocal">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Editor from "@/components/Editor";
  import ImageUpload from "@/components/UploadImage/index.vue";
  import imageUploadMin from "@/components/uploadImageMin/index.vue";
  import imageUploadMax from "@/components/uploadImageMax/index.vue";
  import { getMgyArea } from "@/api/login"
  import { listShopType, getVillageDetail, updateVillageDetail, getTownAllVillage } from "@/api/route/townShipUpload"
  import MAP from "@/components/map/index";

  const normalArea = ['330000000000', '330700000000'];

  export default {
    name: "app-container",
    components: {
      Editor,
      ImageUpload,
      imageUploadMin,
      imageUploadMax,
      MAP
    },
    data() {
      let that = this;
      return {
        id: null,
        formId: null,
        activeName: "first",
        foodList: [],
        loading: false,
        cascaderShow: false,
        //完成按钮状态
        buttonState: false,
        //地址组件
        villageProp: {
          label: 'name',
          value: 'id',
          lazy: true,
          lazyLoad(node, resolve) {
            if (node.level == 5) {
              resolve([]);
              that.form.village.mgyAreaCodeId = node.path;
              that.form.village.areaAddress = node.pathLabels.join(',');
            } else {
              getMgyArea({
                id: node.value || ''
              }).then(res => {
                resolve(res.data);
                if (res.data.length == 0) {
                  that.form.village.mgyAreaCodeId = node.path;
                  that.form.village.areaAddress = node.pathLabels.join(',');
                }
              })
            }
          }
        },
        //表单验证
        rules: {},
        //表单数据
        form: {
          village: {},
          hostelList: [],
          hotelList: [],
          appLandscapesIntroductions: [],
          goods: [],
        },
        userAreaCode: normalArea,
        //乡村级别字典
        villageGradeOptions: [],
        //景点类型字典
        landscapeClassifyOptions: [],
        //景点规模字典
        landscapeScaleOptions: [],
        //特产类型列表
        productTypeList: [],
        //房间类型字典
        roomOptions: [],
        localForm: {
          open: false,
          type: '',
          index: '',
          toAddress: '',
          toPosition: '',
          address: '',
          position: ''
        },
        villageIndex: null,
        //同个镇下乡村
        villagelist: []
      };
    },
    computed: {
      cascaderPlaceholder() {
        if (this.form.village && this.form.village.areaAddress) {
          return this.form.village.areaAddress.split(',').join('/')
        }
      },
    },
    created() {
      this.getShopTypeList();
      this.getDicts("village_grade").then((response) => {
        this.villageGradeOptions = response.data;
      });
      this.getDicts("landscape_classify").then((response) => {
        this.landscapeClassifyOptions = response.data;
      });
      this.getDicts("landscape_scale").then((response) => {
        this.landscapeScaleOptions = response.data;
      });
      this.getDicts("room_type").then((response) => {
        this.roomOptions = response.data;
      });

      this.id = this.$route.query.id;
      this.formId = this.$route.query.id;
      this.refresh()
    },
    mounted() {},
    methods: {
      getInfo() {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        getVillageDetail(this.formId).then(res => {
          // console.log(res)
          this.form.village.mgyAreaCodeId = ''
          this.cascaderShow = true;
          this.$nextTick(() => {
            if (res.data.village.mgyAreaCodeId) {
              res.data.village.mgyAreaCodeId = res.data.village.mgyAreaCodeId.split(',')
            } else {
              res.data.village.mgyAreaCodeId = this.userAreaCode;
            }
            this.form = res.data;
          })

          loading.close()
        }).catch(err => {
          loading.close()
        })
      },
      getTownAllVillage() {
        getTownAllVillage(this.id).then(res => {
          this.villagelist = res.data.villageList;
          this.userAreaCode = res.data.userAreaCode.mgyAreaCodeId || normalArea;
        })
      },
      villageTab(i) {
        this.villageIndex = i;
        let villageData = this.villagelist[i];
        if (villageData.id) {
          this.formId = villageData.id;
        } else {
          this.formId = null;
        }
        this.refresh(villageData.villageName, villageData)
      },
      refresh(villageName, villageData) {
        this.reset(villageName)
        this.getTownAllVillage()
        if (this.formId) {
          this.getInfo()
        } else {
          this.form.village.areaAddress = villageData ? villageData.areaAddress : '';
          this.cascaderShow = true;
          this.$nextTick(() => {
            if (villageData && villageData.mgyAreaCodeId) {
              this.form.village.mgyAreaCodeId = villageData.mgyAreaCodeId.split(',')
            } else {
              this.form.village.mgyAreaCodeId = this.userAreaCode;
            }
          })
        }
      },
      //重置表单数据
      reset(villageName) {
        this.cascaderShow = false;
        this.form = {
          village: {
            villageName: villageName || '',
          },
          hostelList: [],
          hotelList: [],
          appLandscapesIntroductions: [],
          goods: [],
        };
        this.resetForm("form");
      },
      /* 获取商品分类列表 */
      getShopTypeList() {
        listShopType().then(res => {
          this.productTypeList = res.data;
          console.log('获取商品分类列表',this.productTypeList);
        });
      },

      //乡村简介图片上传组件回调
      villageUploadImg(e) {
        this.form.village.villageImage = e;
      },

      //美食图片上传组件成功回调
      msDelicacyUploadImg(e) {
        this.form.hotelList[e.fatherIndex].dishes[e.index].img = e.value;
      },

      //特色美食图片上传组件回调
      delicacyUploadImg(e) {
        this.form.hotelList[e.index].img = e.value;
      },
      //景点图片上传组件回调
      landsUploadImg(e) {
        this.form.appLandscapesIntroductions[e.index].image = e.value;
      },
      //特产上传图片组件回调
      goodsUploadImg(e) {
        this.form.goods[e.index].goodsImage = e.value;
      },

      /* 推荐美食table表单删除按钮 */
      foodDeleteClick(row, index) {
        this.form.hotelList[index].dishes.splice(row.$index, 1);
      },

      /* 推荐美食添加按钮点击事件 */
      foodClick(index) {
        const obj = {
          name: "",
          img: "",
          intro: "",
        };
        this.form.hotelList[index].dishes.push(obj);
      },


      // 特色民宿图片上传组件
      roomUploadImg(e) {
        this.form.hostelList[e.index].imageUrl = e.value;
      },

      //特色民宿类型图片上传组件回调
      roomTypeUploadImg(e) {
        this.form.hostelList[e.fatherIndex].hostelRooms[e.index].imageUrl = e.value;
      },

      /* 特色民宿类型表单删除按钮点击事件 */
      roomTypeDeleteClick(row, index) {
        this.form.hostelList[index].hostelRooms.splice(row.$index, 1);
      },

      /* 特色民宿类型添加按钮点击事件 */
      roomTypeClick(index) {
        const obj = {
          roomType: "",
          imageUrl: "",
          intro: ""
        };
        this.form.hostelList[index].hostelRooms.push(obj);
      },

      partChg(key, type, i) {
        if (type == 'add') {
          let obj = {};
          if (key == 'hotelList') {
            obj.dishes = [{}]
          } else if (key == 'hostelList') {
            obj.hostelRooms = [{}]
          }
          this.form[key].push(obj)
        } else {
          this.form[key].splice(i, 1)
        }
      },
      /* 提交按钮事件 */
      submit() {
        let sendData = JSON.parse(JSON.stringify(this.form));
        sendData.village.mgyAreaCodeId = sendData.village.mgyAreaCodeId.join(',')
        if (!sendData.village.areaAddress) {
          this.$message.error('请选择乡村地址');
        }
        console.log(this.form.goods)
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });



        updateVillageDetail(sendData).then(res => {
          loading.close();
          this.$message.success(res.msg)
          if (this.id) {
            this.formId = res.data.id;
          }
          this.refresh()
        }).catch(err => {
          loading.close();
        })
      },
      openLocal(key, index) {
        let data = this.form[key][index];
        let position = data.longitude && data.latitude ? (data.longitude + ',' + data.latitude) : '';
        let villageAddress = this.form.village.areaAddress.split(',').join('');
        this.localForm = {
          open: true,
          key: key,
          index: index,
          toAddress: data.address || villageAddress,
          toPosition: position,
          address: data.address,
          position: position
        }
      },
      mapChg(e) {
        this.localForm.address = e.address;
        this.localForm.position = e.lnglat;
      },
      submitLocal() {
        if (!this.localForm.address) {
          this.$message.error("请输入地址")
          return false;
        }
        if (!this.localForm.position) {
          this.$message.error("请选择定位")
          return false;
        }
        let lnglat = this.localForm.position.split(',');
        this.form[this.localForm.key][this.localForm.index].address = this.localForm.address;
        this.form[this.localForm.key][this.localForm.index].longitude = lnglat[0];
        this.form[this.localForm.key][this.localForm.index].latitude = lnglat[1];
        this.cancel()
      },
      cancel() {
        this.localForm = {
          open: false,
          type: '',
          index: '',
          toAddress: '',
          toPosition: '',
          address: '',
          position: ''
        }
      }
    },
  };
</script>

<style lang="scss" scoped>
  #villageDetail {
    background: #F1F2F4;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    .listbox {
      width: 180px;
      overflow-y: auto;
      background-color: #fff;
      position: absolute;
      top: 20px;
      left: 20px;
      bottom: 20px;

      .villagelist {
        overflow: hidden;

        div {
          font-size: 16px;
          color: #999;
          text-align: center;
          line-height: 40px;
          width: 140px;
          height: 40px;
          border-radius: 10px;
          cursor: pointer;
          border: 1px solid transparent;
          margin: 20px auto;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          overflow: hidden;
          word-break: break-all;
          -webkit-line-clamp: 1;

          &:hover {
            font-weight: 500;
          }

          &.chk {
            color: #333;
            background-color: #fff;
            border: 1px solid rgba(19, 93, 242, 0.2);
          }

          &.type1 {
            color: #FFA53C;
          }

          &.type2 {
            color: #36BC7D;
          }
        }
      }
    }

    .infobox {
      position: absolute;
      top: 20px;
      left: 220px;
      right: 20px;
      bottom: 20px;
      overflow-y: auto;


      ::v-deep .el-tabs {
        position: relative;

        .el-tabs__nav-scroll {
          padding: 10px 0;
          background: #ffffff;
          border: none;
          box-shadow: 0;
        }

        .el-tabs__nav {
          margin: 0 20px;
        }

        .el-tabs__content {
          // margin: 0 20px;

          // background: #ffffff;

          border-radius: 5px;

          .ms {
            padding: 10px 20px;
            background: #ffffff;
          }
        }

        .table {
          width: 100%;
          // height: 200px;
          border-left: 1px solid #E8E8E9;
          border-right: 1px solid #E8E8E9;
          border-bottom: 1px solid #f2f2f2;

          .table-at {
            width: 100%;
            height: 50px;
            background: #F1F2F4;
            display: flex;

            div {
              border-left: 1px solid #E8E8E9;
              border-right: 1px solid #E8E8E9;
              width: 16.7%;
              font-size: 16px;
              color: #000000;
              display: flex;
              justify-content: center;
              align-items: center;
            }
          }

          .table-no {
            width: 100%;
            height: 50px;
            display: flex;
            align-items: center;


            div {
              width: 16.7%;
              height: 100%;
              text-align: center;
              font-size: 16px;
              color: #000000;


              .el-form-item {
                width: 100%;
                height: 100%;
                margin: 0;

                .el-form-item__content {
                  width: 100%;
                  height: 100%;

                  .el-input {
                    width: 100%;
                    height: 100%;

                    .el-input__inner {
                      width: 100%;
                      height: 100%;
                      // border: none;
                      font-size: 16px;
                      text-align: center;
                      border-radius: 0;
                    }
                  }
                }

              }

            }
          }
        }
      }

      .wan {
        position: absolute;
        right: 10px;
        top: 10px;
        border-radius: 10px;
      }

      .detail-title {
        margin: 20px 0;
        display: flex;
        align-items: center;

        span {
          font-size: 16px;
          font-weight: bold;
          flex: 1;
        }

        i {
          font-size: 20px;
          color: #f00;
          cursor: pointer;
        }
      }

      .add-line {
        width: 100px;
        height: 25px;
        margin: 0 auto 20px;
        cursor: pointer;
        font-size: 25px;
        color: #646464;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #F1F2F4;
      }

      .addbtn {
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100px;
        background-color: #fff;
        cursor: pointer;

        i {
          margin-right: 10px;
        }
      }

    }
  }
</style>